<template>
  <div>
    <a-descriptions bordered title="Custom Size" :size="size">
      <template #extra>
        <a-button @click="showModal">Edit</a-button>
      </template>
      <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
      <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
      <a-descriptions-item label="Time">18:00:00</a-descriptions-item>
      <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
      <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
      <a-descriptions-item label="Official">$60.00</a-descriptions-item>
      <a-descriptions-item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10 GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
        <br />
      </a-descriptions-item>
    </a-descriptions>
    <br />
    <br />
    <a-descriptions title="Custom Size" :size="size">
      <template #extra>
        <a-button type="primary">Edit</a-button>
      </template>
      <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
      <a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
      <a-descriptions-item label="Time">18:00:00</a-descriptions-item>
      <a-descriptions-item label="Amount">$80.00</a-descriptions-item>
      <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
      <a-descriptions-item label="Official">$60.00</a-descriptions-item>
    </a-descriptions>
  </div>
  <div>
    <a-button type="primary" @click="showModal">Modal</a-button>
    <a-modal
        width="500px"
        v-model:visible="visible"
        title="Modal"
        ok-text="确认"
        cancel-text="取消"
        @ok="hideModal"
    >
      <Demo2></Demo2>
      <Demo3></Demo3>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
// TODO
import Demo2 from "./Demo2.vue";
import Demo3 from "./Demo2.vue";

export default defineComponent({
  components: {Demo2,Demo3},
  setup() {
    const visible = ref(false);

    const showModal = () => {
      visible.value = true
    }

    const hideModal = () => {
      visible.value = false
    }
    const size = ref('default');
    return {
      size,
      visible,
      showModal,
      hideModal,
      confirm,
    };
  },
});
</script>


